<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="mint/lib/style.css">
</head>

<body>
    <div id="appCtrl" v-locak>
        <mt-header title="实名认证">
            <a href="javascript:;" @click="history.go(-1)" slot="left">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>

        <div class="mt-cell-group mt-cell-left">
            <mt-field 
            label="真实姓名" 
            placeholder="请输入真实姓名" 
            v-model.trim="name"></mt-field>
        
            <mt-cell
                title="性别">
                <mt-radio-group 
                color="#C99D68" 
                name="gender"
                v-model="gender">
                    <mt-radio :val="0">
                    男</mt-radio>
                    <mt-radio :val="1">
                    女</mt-radio>
                </mt-radio-group>                
            </mt-cell>

            <mt-cell
                is-link
                :value="credText"
                @click.native="credVisible=true"
                title="证件类型">
            </mt-cell>

            <mt-field 
            label="证件号码" 
            placeholder="请输入证件号码" 
            v-model.trim="idNo"></mt-field>

            <mt-field 
            label="手机号码" 
            placeholder="请输入手机号码" 
            v-model.trim="mobile"></mt-field>

            <mt-cell
                is-link
                @click.native="areaVisible=true"
                :value="areaText||'请选择所在地'"
                title="所在地">
            </mt-cell>

            <mt-field 
            label="详细地址" 
            placeholder="请输入详细地址" 
            v-model.trim="adderss"></mt-field>

            <div style="margin:10px;">
                <mt-button type="primary" size="large" @click="submit">
                    保持
                </mt-button>   
            </div>

        </div>

        <mt-popup
          v-model="genderVisible"
          position="bottom" style="width:100%">
          <mt-picker 
            title="请滑动选择性别"
            :slots="genderSlots" 
            :show-toolbar="true"
            :ok="genderOk">
          </mt-picker>
        </mt-popup>

        <mt-popup
          v-model="credVisible"
          position="bottom" style="width:100%">
          <mt-picker 
            title="请滑动选择证件类型"
            :slots="credSlots" 
            :show-toolbar="true"
            :ok="credOk">
          </mt-picker>
        </mt-popup>

        <mt-popup
          v-model="areaVisible"
          position="bottom" style="width:100%">
          <mt-picker 
            title="请滑动选择所在地"
            :slots="areaSlots" 
            :show-toolbar="true"
            @change="onAddressChange"
            :ok="areaOk">
          </mt-picker>
        </mt-popup>
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/zepto.min.js"></script>
    <script src="mint/lib/index.js"></script>
    <script src="js/city-data.js"></script>
    <script>
    var vm = new Vue({
        el: '#appCtrl',

        data: function(){
        	return {
                name:'',
        		mobile:'',
        		psw:'',
                code:'',
                cred:100,
                gender:0,

                idNo:'',
                areaText:'',
                adderss:'',

                genderVisible:false,
                credVisible:false,
                areaVisible:false,
                credText:'身份证',

                genderSlots:[{
                  flex: 1,
                  values: [{
                    key:0,
                    label:'女'
                  },{
                    key:1,
                    label:'男'
                  }]
                }],

                credSlots:[{
                    flex:1,
                    values:[{
                        key:100,
                        label:'身份证'
                    },{
                        key:101,
                        label:'港澳通行证'
                    }]
                }],

                areaSlots:[]

        	}
        },

        watch:{
            gender: function(v){
                console.log(v)
            }
        },

        methods:{
        	submit: function(){
                if(!this.name){
                    this.$toast('请输入真实姓名')
                    return;
                }
                if(!this.idNo){
                    this.$toast('请输入证件号码')
                    return;
                }
        		if(!this.mobile){
        			this.$toast('请输入手机号码');
        			return;
        		}
                if(!/^0?(13|15|18|14|16|17|19)[0-9]{9}$/.test(this.mobile)){
                    this.$toast('手机号码格式有误');
                    return;
                }
                if(!this.areaText){
                    this.$toast('请选择所在地');
                    return;
                }
        		if(!this.adderss){
        			this.$toast('请输入详细地址');
        			return;
        		}

                alert('这里编写保存')
                // $.ajax()
        	},

            genderOk: function(val){
                val = val[0];
                this.gender = val.key;
                this.genderVisible = false;
            },

            credOk: function(val){
                val = val[0];
                this.cred = val.key;
                this.credText = val.label;
                this.credVisible = false;
            },

            buildUpAreaSlots: function(){
                var province = [] , citys = [], county=[];
                cityInfoOptions.forEach(function(value, index){
                    province[index] = {
                        key: value.value,
                        label: value.label,
                        index: index
                    };
                });
                cityInfoOptions[0].children.forEach(function(value, index){
                    citys[index] = {
                        key: value.value,
                        label: value.label,
                        index: index
                    };
                });
                cityInfoOptions[0].children[0].children.forEach(function(value, index){
                    county[index] = {
                        key: value.value,
                        label: value.label,
                        index: index
                    };
                });

                this.areaSlots=[{
                        flex: 1,
                        values: province,
                        className: 'province',
                        textAlign: 'center'
                      }, {
                        divider: true,
                        content: '-',
                        className:'slot1'
                      }, {
                        flex: 1,
                        values: citys,
                        className: 'citys',
                        textAlign: 'center'
                      }, {
                        divider: true,
                        content: '-',
                        className:'slot2'
                      }, {
                        flex: 1,
                        values: county,
                        className: 'county',
                        textAlign: 'center'
                }]
            },

            onAddressChange(picker, values) {
                if(!values.length)return;
                var citys = [], county=[];
                cityInfoOptions[values[0].index].children.forEach(function(value, index){
                    citys[index] = {
                        key: value.value,
                        label: value.label,
                        index: index
                    };
                });
                cityInfoOptions[values[0].index].children[values[1].index].children.forEach(function(value, index){
                    county[index] = {
                        key: value.value,
                        label: value.label,
                        index: index
                    };
                });
                picker.setSlotValues(1, citys);
                picker.setSlotValues(2, county);
          },

          areaOk: function(values){
                var res = [values[0].label,values[1].label]
                if(values[2]){
                    res.push(values[2].label)
                }
                this.areaText = res.join('/');
                this.areaVisible=false;
          }

        },

        mounted: function(){
            this.buildUpAreaSlots();
        }
    })
    </script>
</body>

</html>